<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/jquery-3.4.1.js"></script>
    <link rel="stylesheet" href="../../css/my-page.css">
</head>
<body>
<div class="child-center-has-gap">
    <div id="messageArea" class="message-area"></div>
    <select id="selectTag">
        <option value="0" selected="selected">全部</option>
        <option value="1">门诊</option>
        <option value="2">住院</option>
    </select>
    <button id="getDateBtn">获取值</button>
    <pre class="html-code-area" value="232"></pre>
    <pre class="js-code-area"></pre>
</div>
<div class="child-center-has-gap">
    <div id="messageArea1" class="message-area"></div>
    <select id="selectTag1">
        <option value="0" selected="selected">全部</option>
        <option value="1">门诊</option>
        <option value="2">住院</option>
    </select>
    <button id="getDateBtn1">获取值</button>
    <pre class="html-code-area"></pre>
    <pre class="js-code-area"></pre>
</div>
<div class="child-center-has-gap">
    <div id="messageArea2" class="message-area"></div>
    <select id="selectTag2">
        <option value="0" selected="selected">全部</option>
        <option value="1">门诊</option>
        <option value="2">住院</option>
    </select>
    <button id="getDateBtn2">获取值</button>
    <pre class="html-code-area"></pre>
    <pre class="js-code-area"></pre>
</div>
<script type="text/javascript">

    $(function () {
        // html代码块初始化
        loadCodeToPreElement();
        // 获取select的值的事件和js代码
        $("#getDateBtn").click(function () {
            $(this).prevAll("div.message-area").text($("#selectTag option:selected").val());
        }).nextAll("pre.js-code-area").text(`
$("#getDateBtn").click(function () {
    $("#messageArea").text($("#selectTag option:selected").val());
})
        `);

        $("#getDateBtn1").click(function () {
            $(this).prevAll("div.message-area").text($("#selectTag1 option:selected").val());
        }).nextAll("pre.js-code-area").text(`
$("#selectTag1").val(1);
        `);

        $("#getDateBtn2").click(function () {
            $(this).prevAll("div.message-area").text($("#selectTag2 option:selected").val());
        }).nextAll("pre.js-code-area").text(`
$("#selectTag2 option[value='" + 2 +"']").attr("selected", true);
        `);

        // 设置select的值
        settingSelectVal();
        // 设置select的值方式2
        settingSelectVal2();

    })

    function loadCodeToPreElement() {
        $(".html-code-area").text(function () {
            return '<div>' + $(this).parent().html() + '</div>';
        });
    }

    function settingSelectVal() {
        $("#selectTag1").val(1);
    }

    function settingSelectVal2() {
        $("#selectTag2 option[value='" + 2 +"']").attr("selected", true);
    }

</script>
</body>
</html>